<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/index.css" />
<link rel="stylesheet" type="text/css" href="../../css/personal.css" />
<link rel="stylesheet" type="text/css" href="../../css/background.css" />

<script type="text/javascript" src="../../bootstrap-3.3.7/dist/js/jquery.min.js"></script>
<script type="text/javascript" src="../../bootstrap-3.3.7/dist/js/bootstrap.js"></script>
<!-- bootstrap表格插件 -->
<script src="../../bootstrap-3.3.7/dist/js/bootstrap-table.js"></script>
<link href="../../bootstrap-3.3.7/dist/css/bootstrap-table.css" rel="stylesheet" />
<script src="../../bootstrap-3.3.7/dist/js/bootstrap-table-zh-CN.js"></script>
<script src="../../js/moment-with-locales.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../bootstrap-3.3.7/docs/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<script src="../../js/bootstrap-datetimepicker.min.js"></script>
<script src="../../js/bootstrap-datetimepicker.zh-CN.js"></script>
</head>
<body>
	<h4 class="heading">统计分析</h4>
	<div class="myline"></div>
	<div class="col-md-12">
		<div class="form-group" style="margin-top: 15px; margin-bottom: 0px; margin-left: 15px">
			<div class="col-md-3">
				<select class="combobox" id="style" style="height: 30px; width: 100%; float: left">
					<option value="1">知识数量</option>
					<option value="2">知识浏览量</option>
					<option value="3">用户下载量</option>
					<option value="4">知识下载量</option>
					<option value="5">用户数</option>
					<option value="6">系统访问量</option>
				</select>
			</div>
			<div class="col-md-2" id="style1" hidden="true">
				<select class="combobox" id="count" style="height: 30px; width: 100%; float: left">
					<option value="+10">前10条</option>
					<option value="+50">前50条</option>
					<option value="-50">后50条</option>
					<option value="-10">后10条</option>
				</select>
			</div>
			<div class="col-md-3" id="style2" hidden="true">
				<select class="combobox" id="user_style" style="height: 30px; width: 100%; float: left">
					<option value="all">全部</option>
					
					<c:forEach items="${rolelist}" var="role">
						<option value="${role.roleid}">${role.rolename}</option>
					</c:forEach>
				</select>
			</div>
			<div class="col-md-3" id="style3" hidden="true">
				<select class="combobox" id="staticanalytime" style="height: 30px; width: 100%; float: left">
					<option value="day">按日</option>
					<option value="month">按月</option>
					<option value="year">按年</option>
				</select>
			</div>
			
			<!-- <div class="col-md-2" style="margin-left: 40px;">
				<button type="button" style="margin-left: 10px" id="excel-exp" class="btn btn-primary">导出为excel</button>
			</div> -->
		</div>
		<br>
		<div class="row" style="margin-top: 20px; margin-left: 40px">
			<div class="col-md-12" id="ku"></div>
		</div>
		<div class="row" style="margin-top: 10px;">
			<label class="col-md-1 control-label">时间</label>
			<div class="col-md-3 day">
				<a class='input-group date' id='datetimestart_day'> 
				<input type='text' class="form-control" id='startdate_day' /> 
				<span class="input-group-addon" style="width: 50px;"> 
				<span class="glyphicon glyphicon-calendar"></span>
				</span>
				</a>
			</div>
			
			<div class="col-md-3 month" hidden="true">
				<a class='input-group date' id='datetimestart_month'> 
				<input type='text' class="form-control" id='startdate_month' /> 
				<span class="input-group-addon" style="width: 50px;"> 
				<span class="glyphicon glyphicon-calendar"></span>
				</span>
				</a>
			</div>
			
			<div class="col-md-3 year" hidden="true">
				<a class='input-group date' id='datetimestart_year'> 
				<input type='text' class="form-control" id='startdate_year' /> 
				<span class="input-group-addon" style="width: 50px;"> 
				<span class="glyphicon glyphicon-calendar"></span>
				</span>
				</a>
			</div>
			<div style="float: left">--</div>
			<div class="col-md-3 day">
				<a class='input-group date' id='datetimeend_day'> 
				<input type='text' class="form-control" id='enddate_day' /> 
				<span class="input-group-addon" style="width: 50px;"> 
				<span class="glyphicon glyphicon-calendar"></span>
				</span>
				</a>
			</div>
			<div class="col-md-3 month" hidden="true">
				<a class='input-group date' id='datetimeend_month'> 
				<input type='text' class="form-control" id='enddate_month' /> 
				<span class="input-group-addon" style="width: 50px;"> 
				<span class="glyphicon glyphicon-calendar"></span>
				</span>
				</a>
			</div>
			<div class="col-md-3 year" hidden="true">
				<a class='input-group date' id='datetimeend_year'> 
				<input type='text' class="form-control" id='enddate_year' /> 
				<span class="input-group-addon" style="width: 50px;"> 
				<span class="glyphicon glyphicon-calendar"></span>
				</span>
				</a>
			</div>
			<div class="col-md-1" style="text-align: left;">
				<button type="button" style="margin-left: 10px" id="btn_query" class="btn btn-primary">统计结果</button>
			</div>
		</div>

		<div id="mainContent"></div>
	</div>
</body>
<script type="text/javascript">
	var count = 0;
	//html_id为HTML页面上要添加位置的ID
	function KuBindNew(html, html_id, level, pId) {
		//清空下拉数据		
		for (var x = level; x <= count; x++) {
			$("#" + html + x).remove();
		}	
		var str = "";
		$.ajax({
					type : "POST",
					url : "../configration/getReczsk",
					data : {
						"id" : "",
						"pId" : pId,
						"name" : "",
						"value" : "",
						"level" : level
					},
					dataType : "JSON",
					async : false,
					success : function(data) {
						if (data.length != 0) {
							str += '<div id='+html+level+' class="col-md-3"  style="margin-bottom: 15px"><select id='
									+ html_id
									+ level
									+ ' name="kulist" style="height: 30px; width: 100%; float: left">';
							//从服务器获取数据进行绑定
							str += "<option value='all'>全部</option>";
							$.each(data, function(i, item) {
								str += "<option value=" + item.id + ">"
										+ item.name + "</option>";
							})
							str += "</select></div>";
							//将数据添加到省份这个下拉框里面
							$("#" + html_id).append(str);
							count++;
						}
					},
					error : function() {
						alert("Error");
					}
				});
	}
	function dynamicBindNew(html, html_id, level) {
		for (var i = level; i <= count; i++) {
			(function(m) {
				$("#" + html_id + m).change(
						function() {
								KuBindNew(html, html_id, m + 1,$("#" + html_id + m).val());
								dynamicBindNew(html, html_id, m + 1);						
						});
			})(i);
		}
	}
	$(function() {
		//初始化时间控件		
		datetimebyDay();
		datetimebyMonth();
		datetimebyYear();
		
        //初始化动态库标签内容
		KuBindNew("kudiv", "ku", 1, "");
		dynamicBindNew("kudiv", "ku", 1);
        
		//默认的显示
		$("#mainContent").load('../staticanaly/infocount.jsp?ku=all');
		
		//2.初始化Button的点击事件
		var oButtonInit = new ButtonInit();
		oButtonInit.Init();

		$("#style").change(
				function() {
					if ($("#style").val() == 2 || 
							 $("#style").val() == 4) {
						$("#style1").show();
						$("#style2").hide();
						$("#style3").hide();
						KuBindNew("kudiv", "ku", 1, "");
						dynamicBindNew("kudiv", "ku", 1);
						$("#ku").show();
						$('.day').hide();
						$('.month').hide();
						$('.year').show();
					}
					else if($("#style").val() == 3){
						$("#style1").show();
						$("#style2").hide();
						$("#style3").hide();
						KuBindNew("kudiv", "ku", 1, "");
						dynamicBindNew("kudiv", "ku", 1);
						$("#ku").show();
						$('.day').show();
						$('.month').hide();
						$('.year').hide();
					}else if ($("#style").val() == 1) {
						$("#style1").hide();
						$("#style2").hide();
						$("#style3").hide();
						KuBindNew("kudiv", "ku", 1, "");
						dynamicBindNew("kudiv", "ku", 1);
						$("#ku").show();
						$('.day').show();
						$('.month').hide();
						$('.year').hide();
					} else if ($("#style").val() == 5) {
						$("#style1").hide();
						$("#style2").show();
						$("#style3").hide();
						$("#ku").hide();
						$('.day').show();
						$('.month').hide();
						$('.year').hide();
					} else if ($("#style").val() == 6) {
						$("#style1").hide();
						$("#style2").hide();
						$("#style3").show();
						$("#staticanalytime").val("day");
						$("#ku").hide();
						$('.day').show();
						$('.month').hide();
						$('.year').hide();	
					}
				});
		//根据按月、按年
		$("#staticanalytime").change(
				function() {
					if ($("#staticanalytime").val() == 'day') {	
						$('.day').show();
						$('.month').hide();
						$('.year').hide();
						
					} else if ($("#staticanalytime").val() == 'month') {
						$('.day').hide();
						$('.month').show();
						$('.year').hide();
						
					} else if ($("#staticanalytime").val() == 'year') {
						$('.day').hide();
						$('.month').hide();
						$('.year').show();
						
					}
				});
	});

	var ButtonInit = function() {
		var oInit = new Object();
		oInit.Init = function() {
			//初始化页面上面的按钮事件
			$('#btn_query').bind(
					'click',
					function() {
						//获取当前想要统计的库
						var kulist = $("select[name='kulist'] option:selected");
						var kudata;
						var type;
						if(kulist[kulist.length - 1].value=="all" && kulist.length>1){
							kudata = kulist[kulist.length - 2].value;
							type="all";
						}
						if(kulist[kulist.length - 1].value=="all" && kulist.length<=1){
							kudata = "all";
							type="all";
						}
						if(kulist[kulist.length - 1].value!="all"){
							kudata = kulist[kulist.length - 1].value;
							type="noall";
						} 
						
						var cs = $("#style").val();
						
						
						var startdate;
						var enddate;		
						var way;
						switch (cs) {
							case ('1') :
								startdate=$("#startdate_day").val();
						        enddate=$("#enddate_day").val();
								$("#mainContent").load(
										'../staticanaly/infocount.jsp?ku='+kudata+'&type='+type+'&startdate='+startdate+'&enddate='+enddate);
								break;
							case ('2') :
								startdate=$("#startdate_year").val();
							    enddate=$("#enddate_year").val();
								way=$("#count").val();
								$("#mainContent").load(
										'../staticanaly/infoscan.jsp?ku='+kudata+'&startdate='+startdate+'&enddate='+enddate+'&way='+way);
								break;
							case ('3') :
								startdate=$("#startdate_day").val();
						        enddate=$("#enddate_day").val();
							    way=$("#count").val();
								$("#mainContent").load(
										'../staticanaly/userdownload.jsp?ku='+kudata+'&startdate='+startdate+'&enddate='+enddate+'&way='+way);
								break;
							case ('4') :
								startdate=$("#startdate_year").val();
						        enddate=$("#enddate_year").val();
							    way=$("#count").val();
								$("#mainContent").load(
										'../staticanaly/konwdownload.jsp?ku='+kudata+'&startdate='+startdate+'&enddate='+enddate+enddate+'&way='+way);
								break;
							case ('5') :
								startdate=$("#startdate_day").val();
					            enddate=$("#enddate_day").val();
						        way=$("#user_style").val();
								$("#mainContent").load(
										'../staticanaly/usercount.jsp?way='+way+'&startdate='+startdate+'&enddate='+enddate);
								break;
							case ('6') :
								if ($("#staticanalytime").val() == 'day') {	
									startdate=$("#startdate_day").val();
						            enddate=$("#enddate_day").val();
								} else if ($("#staticanalytime").val() == 'month') {
									startdate=$("#startdate_month").val();
						            enddate=$("#enddate_month").val();
								} else if ($("#staticanalytime").val() == 'year') {
									startdate=$("#startdate_year").val();
						            enddate=$("#enddate_year").val();
								}
								way=$("#staticanalytime").val();
								$("#mainContent").load(
										'../staticanaly/systemaccess.jsp?way='+way+'&startdate='+startdate+'&enddate='+enddate);
								break;
							default :
								$("#mainContent").load(
										'../staticanaly/infocount.jsp?ku='+kudata+'&startdate='+startdate+'&enddate='+enddate);
						}
					});
		};

		return oInit;
	};

	function datetimebyDay() {
		$('#datetimestart_day').datetimepicker({
			language : 'zh-CN',//显示中文
			format : 'yyyy-mm-dd',//显示格式
			startView : 2,//打开之后首先选择的视图
			minView : 2,//设置只显示到月份
			initialDate : new Date(),
			autoclose : true,//选中自动关闭
			todayBtn : true,//显示今日按钮
			locale : moment.locale('zh-cn')
		});
		$('#datetimeend_day').datetimepicker({
			language : 'zh-CN',//显示中文
			format : 'yyyy-mm-dd',//显示格式
			minView : 2,//设置只显示到月份
			startView : 2,
			initialDate : new Date(),
			autoclose : true,//选中自动关闭
			todayBtn : true,//显示今日按钮
			locale : moment.locale('zh-cn')
		});

	}
	function datetimebyMonth() {
		$('#datetimestart_month').datetimepicker({
			language : 'zh-CN',//显示中文
			format : 'yyyy-mm',//显示格式
			startView : 3,//打开之后首先选择的视图
			minView : 3,//设置只显示到月份
			initialDate : new Date(),
			autoclose : true,//选中自动关闭
			todayBtn : true,//显示今日按钮
			locale : moment.locale('zh-cn')
		});
		$('#datetimeend_month').datetimepicker({
			language : 'zh-CN',//显示中文
			format : 'yyyy-mm',//显示格式
			minView : 3,//设置只显示到月份
			startView : 3,
			initialDate : new Date(),
			autoclose : true,//选中自动关闭
			todayBtn : true,//显示今日按钮
			locale : moment.locale('zh-cn')
		});

	}
	function datetimebyYear() {
		$('#datetimestart_year').datetimepicker({
			language : 'zh-CN',//显示中文
			format : 'yyyy',//显示格式
			startView : 4,//打开之后首先选择的视图
			minView : 4,//设置只显示到月份
			initialDate : new Date(),
			autoclose : true,//选中自动关闭
			todayBtn : true,//显示今日按钮
			locale : moment.locale('zh-cn')
		});
		$('#datetimeend_year').datetimepicker({
			language : 'zh-CN',//显示中文
			format : 'yyyy',//显示格式
			minView : 4,//设置只显示到月份
			startView : 4,
			initialDate : new Date(),
			autoclose : true,//选中自动关闭
			todayBtn : true,//显示今日按钮
			locale : moment.locale('zh-cn')
		});

	}
</script>
</html>